<template>
    <div class="order"
        style="background-color: rgb(241, 241, 241);padding:5px;padding-right: 7px;min-height: 100vh; box-sizing: border-box;">
        <van-nav-bar title="我的订单" left-text="返回" left-arrow fixed @click="$router.push('/user')">
        </van-nav-bar>
        <div style="height: 42px;"></div>

        <van-tabs v-model:active="active" style="width: 100vw;left: -5px;" sticky swipeable offset-top="42px" @change="changeTab">
            <van-tab title="全部">
                <Suspense>
                    <template #default>
                        <OrderList :orderData="orderData"/>
                    </template>
                    <template #fallback>
                        <div style="height: 60px;line-height: 60px; text-align: center;">加载中...</div>
                    </template>
                </Suspense>
                    
            </van-tab>
            <van-tab title="待支付">
                <OrderList :orderData="orderData"/>
            </van-tab>
            <van-tab title="待发货">
                <OrderList :orderData="orderData"/>
            </van-tab>
            <van-tab title="待评价">
                <OrderList :orderData="orderData"/>
            </van-tab>
         </van-tabs>

    </div>
</template>

<script setup>
import { getOrderList } from '../../api';
import {ref,defineAsyncComponent} from 'vue'

const OrderList = defineAsyncComponent(()=>{
  return import('@/components/OrderList.vue')
})
const active = ref(0);
let orderData = ref([])

//获取全部订单信息
getOrderList({ status: 0, page: 1, limit: 100 }).then(res => {
    if (res.code == 1) {
        orderData.value=res.data.list?.reverse()
       // console.log(orderData.value)
    }
})
 localStorage.removeItem('curGoodsId')

//改变tab的状态显示不同的订单
function changeTab(state){
    getOrderList({ status: state, page: 1, limit: 100 }).then(res => {
    if (res.code == 1) {
        orderData.value=res.data.list?.reverse()
    }
})
}
</script>

<style scoped>

</style>